<template>
  <div class="side-bar">
      <ul>
        <li v-for="(item,index) in categoryList" :key="index"
        :class="{active: currentIndex === index}"
        @click="handleClick(index,item)">{{item.title}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'CategorySideBar',
    props: {
      categoryList:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data(){
      return{
        currentIndex:0,
        maitKey:''
      }
    },
    methods: {
      handleClick(index,item){
        this.currentIndex = index
        this.maitKey = item.maitKey;
      }
    },
    watch: {
        maitKey(to,from){
            // 当发现maitKey改变时再触发handleClick函数
            this.$emit('handleClick', to);
        }
    },
}
</script>

<style scoped>
.side-bar {
    width: 100px;
    background: #f6f6f6;
    font-size: 18px;
    position: relative;
    height:100%;
}

.side-bar ul li {
    text-align: center;
    padding: 20px 4px;
    list-style:none;
    
}
.active {
    background: #fff;
    border-left: 4px solid var(--color-tint);
}
</style>